<template>
  <div class="item" @click="detail('detail')">
    <ul>
      <li v-for="item in availability" :key="item.houseCode">
        <div><img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" /></div>
        <div>
          <ul>
            <li>{{ item.title }}</li>
            <li>{{ item.desc }}</li>
            <li></li>
            <li>
              <span>{{ item.tags[0] }}</span>
            </li>
            <li>
              <span>{{ item.price }}</span
              ><span>元/月</span>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'CollectPage',
  methods: {
    detail(path) {
      this.$router.push(
        {
          name: path,
        },
        () => {}
      )
    },
  },
  data() {
    return {
      availability: null,
    }
  },
  async created() {
    const { data } = await axios.get('http://liufusong.top:8080/houses')
    this.availability = data.body.list
  },
}
</script>

<style lang="less" scoped>
@rootSize: 37.55rem;
.delete-button {
  height: 100%;
}
.item {
  padding: (10 / @rootSize) (15 / @rootSize);
  ul {
    height: (200 / @rootSize);
    li {
      display: flex;
      // align-items: center;
      margin-bottom: (20 / @rootSize);
      div {
        img {
          width: (250 / @rootSize);
          height: (200 / @rootSize);
        }
      }

      ul {
        li {
          margin-bottom: (4 / @rootSize);
        }
        li:nth-child(1) {
          font-weight: 600;
          font-size: (12 / @rootSize);
        }
        li:nth-child(2),
        li:nth-child(3) {
          font-size: (10 / @rootSize);
          color: #a5a5a5;
        }
        li:nth-child(4) {
          font-size: (12 / @rootSize);
          color: #a5a5a5;
          span {
            padding: (3 / @rootSize) (12 / @rootSize);
            color: #0ed8ee;
            background-color: #e0f5f7;
            border-radius: 8%;
          }
          span:first-child {
            margin-right: (10 / @rootSize);
          }
        }
        li:nth-child(5) {
          font-weight: 600;
          color: #fa5b46;
          font-size: (16 / @rootSize);
          span:last-child {
            color: #fc8171;
            font-size: (2 / @rootSize);
          }
        }
      }
      div:last-child {
        margin-left: (16 / @rootSize);
      }
    }
  }
}
</style>
